import React from 'react'
import {
  StyleSheet,
  View,
  Image,
  Text,
  TextInput,
  LayoutAnimation,
  TouchableOpacity
} from 'react-native'
import icon_error from '@/assets/images/icon_error.png'
import icon_right from '@/assets/images/icon_right.png'
import icon_question from '@/assets/images/icon_question.webp'
import icon_delete from '@/assets/images/icon_delete.png'

export default class CustomInput2 extends React.Component {
  inputRef: React.RefObject<TextInput>
  state: {
    value: ''
  }
  constructor(props: any) {
    super(props)
    this.state = {
      value: ''
    };
    this.inputRef = React.createRef<TextInput>()
  }
  customFocus = () => {
    this.inputRef.current?.focus()
  }

  customBlur = () => {
    this.inputRef.current?.blur()
  }

  customXXX = () => {
    console.log('customXXX ...')
  }
  render() {
    const { value } = this.state
    return (
      <View style={styles.root}>
        <View
          style={[
            styles.inputWrap,
            {
              borderColor: !value
                ? '#888'
                : value?.length === 11
                ? '#00CD00'
                : '#ff3050'
            },
          ]}>
          <TextInput
            ref={this.inputRef}
            style={styles.input}
            value={value}
            keyboardType="number-pad"
            onChangeText={(value) => {
              LayoutAnimation.spring()
              this.setState({
                value
              })
            }}
            maxLength={11}
          />

          {!!value && (
            <TouchableOpacity
              style={styles.deleteButton}
              onPress={() => {
                LayoutAnimation.spring()
                this.setState({
                  value: ''
                })
              }}>
              <Image style={styles.deleteImg} source={icon_delete} />
            </TouchableOpacity>
          )}
        </View>
        <View style={styles.tipsLayout}>
          {!value ? (
            <>
              <Image style={styles.tipImg} source={icon_question} />
              <Text style={styles.tipsTxt}>请输入您的手机号</Text>
            </>
          ) : value.length === 11 ? (
            <>
              <Image style={styles.tipImgRight} source={icon_right} />
              <Text style={styles.tipsTxtRight}>输入正确，可进行提交</Text>
            </>
          ) : (
            <>
              <Image style={styles.tipImgError} source={icon_error} />
              <Text style={styles.tipsTxtError}>
                格式错误，请输入正确手机号
              </Text>
            </>
          )}
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  root: {
    width: '100%',
    flexDirection: 'column'
  },
  input: {
    width: '100%',
    height: 56,
    backgroundColor: 'transparent',
    paddingHorizontal: 16,
    fontSize: 22,
    color: '#333'
  },
  inputWrap: {
    width: '100%',
    borderWidth: 2,
    borderRadius: 12,
    flexDirection: 'row',
    alignItems: 'center'
  },
  tipsLayout: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 6,
    paddingHorizontal: 6
  },
  tipImg: {
    width: 22,
    height: 22,
    resizeMode: 'contain',
    tintColor: '#888'
  },
  tipsTxt: {
    fontSize: 15,
    color: '#666',
    marginLeft: 6,
    fontWeight: 'bold'
  },
  tipImgRight: {
    width: 18,
    height: 18,
    resizeMode: 'contain',
    tintColor: '#00CD00'
  },
  tipsTxtRight: {
    fontSize: 15,
    color: '#00CD00',
    marginLeft: 6,
    fontWeight: 'bold'
  },
  tipImgError: {
    width: 18,
    height: 18,
    resizeMode: 'contain',
    tintColor: '#ff3050'
  },
  tipsTxtError: {
    fontSize: 15,
    color: '#ff3050',
    marginLeft: 6,
    fontWeight: 'bold'
  },
  deleteButton: {
    position: 'absolute',
    right: 16
  },
  deleteImg: {
    width: 24,
    height: 24,
    resizeMode: 'contain',
    borderRadius: 12
  },
})
